<template>
	<view class="echarts-iframe">
		<view class="iframe-title">
			<view class="title-left">
				{{date_str}}
			</view>
		</view>
		<block v-for="(i,index) in item_index" :key="index">
			<view class="iframe-blocks">
				<view class="block" @click="onNav(i+2)">
					<view class="b-title">
						{{item_title['s'+(i+2)]}}
					</view>
					<view class="b-items">
						<view class="item">
							<view class="i-left">
								本月:
							</view>
							<view class="i-right">
								<text>{{item_amount['s'+(i+2)]==""?0:item_amount['s'+(i+2)]}}</text>万元
							</view>
						</view>
						<view class="item">
							<view class="i-left">
								上月:
							</view>
							<view class="i-right">
								<text>{{item_prev['s'+(i+2)]==""?0:item_prev['s'+(i+2)]}}</text>万元
							</view>
						</view>
						<view class="item">
							<view class="i-left">
								同比{{getRatioStr(getRatio(item_amount['s'+(i+2)],item_prev['s'+(i+2)]))}}:
							</view>
							<view class="i-left-s" v-show="getRatio(item_amount['s'+(i+2)],item_prev['s'+(i+2)])>0">
								↑
							</view>
							<view class="i-left-j" v-show="getRatio(item_amount['s'+(i+2)],item_prev['s'+(i+2)])<0">
								↓
							</view>
							<view class="i-right">
								<text>{{getRatio(item_amount['s'+(i+2)],item_prev['s'+(i+2)])}}</text>%
							</view>
						</view>
					</view>
				</view>
				<view class="block-line"></view>
				<view class="block" @click="onNav(i+3)">
					<view class="b-title">
						{{item_title['s'+(i+3)]}}
					</view>
					<view class="b-items">
						<view class="item">
							<view class="i-left">
								本月:
							</view>
							<view class="i-right">
								<text>{{item_amount['s'+(i+3)]==""?0:item_amount['s'+(i+3)]}}</text>万元
							</view>
						</view>
						<view class="item">
							<view class="i-left">
								上月:
							</view>
							<view class="i-right">
								<text>{{item_prev['s'+(i+3)]==""?0:item_prev['s'+(i+3)]}}</text>万元
							</view>
						</view>
						<view class="item">
							<view class="i-left">
								同比{{getRatioStr(getRatio(item_amount['s'+(i+3)],item_prev['s'+(i+3)]))}}:
							</view>
							<view class="i-left-s" v-show="getRatio(item_amount['s'+(i+3)],item_prev['s'+(i+3)])>0">
								↑
							</view>
							<view class="i-left-j" v-show="getRatio(item_amount['s'+(i+3)],item_prev['s'+(i+3)])<0">
								↓
							</view>
							<view class="i-right">
								<text>{{getRatio(item_amount['s'+(i+3)],item_prev['s'+(i+3)])}}</text>%
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>
<script>
	let pageApp = getApp();
	let _dt = new Date();
	export default {
		data() {
			return {
				date_str: "正在加载中...",
				item_index: [1, 3, 5, 7, 9, 11, 13, 15],
				item_title: [],
				item_amount: [],
				item_prev: []
			}
		},
		onLoad: function() {
			this.getCurDate();
			this.getListById(1001, 8)
			uni.setNavigationBarTitle({
				title: "利润报表"
			})
		},
		methods: {
			onNav(id) {
				// console.log(id);
				uni.navigateTo({
					url: './Chart?id=' + id
				})
			},
			getRatioStr(v) {
				if (v > 0) {
					return "增长"
				} else if (v < 0) {
					return "减少"
				} else if (v == 0) {
					return "不变"
				}
			},
			// b是本月，a是上月
			getRatio(b, a) {
				if (b == "") {
					b = 0;
				}
				if (a == "") {
					a = 0;
				}
				a = parseInt(a);
				b = parseInt(b);
				if (a == 0) {
					return b;
				} else {
					if (b == 0) {
						return b - a;
					} else {
						return (b - a) / a;
					}
				}
			},
			getCurDate() {
				let _str = _dt.getFullYear() + "年" + (_dt.getMonth() + 1) + "月" + _dt.getDate() + "日";
				this.date_str = _str;
			},
			getListById(rptDid, intMonth) {
				let apiData = {
					url: pageApp.globalData.url + "/GetReportData",
					data: {
						ReportDataID: rptDid
					},
					success: (d) => {
						if (d.data.code == "001") {
							if (d.data.data.length > 0) {
								// console.log(d.data.data);
								// 缓存数据对象
								this.rptData = d;
								this.report.createDt(this.rptData);
								// 显示相关数据
								this.item_title = d.data.data[0];
								this.item_amount = d.data.data[intMonth];
								this.item_prev = d.data.data[intMonth - 1];
							}
						}
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			}
		}
	}
</script>
<style>
	page {
		background-color: #F1F5F6;
	}

	.echarts-iframe {
		margin: 20rpx 0;
	}

	.iframe-title {
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
	}

	.iframe-blocks {
		display: flex;
		margin: 10rpx 0;
	}

	.block {
		width: 310rpx;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.block-line {
		width: 10rpx;
		background-color: #F1F5F6;
	}

	.block .b-title {
		font-weight: 700;
	}

	.b-items .item {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.b-items .item .i-left-s {
		color: #FF6600;
	}

	.b-items .item .i-left-j {
		color: green;
	}

	.b-items .item .i-right {
		color: #707070;
	}

	.b-items .item .i-right text {
		color: #FF6600;
		margin-right: 10rpx;
	}
</style>
